<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Register 页面</title>

</head>
<body>
  <center>
    <h1>用户注册</h1>
    <form id="register_form" >
      <table border="1px">
        <tr>
          <td>用户名称</td>
          <td>
            <input type="text" name="username">
          </td>
        </tr>
        <tr>
          <td>用户密码</td>
          <td >
            <input type="text" name="password">
          </td>
        </tr>
        <tr>
          <td>用户年龄</td>
          <td>
            <input type="text" name="age">
          </td>
        </tr>
        <tr>
          <td>用户电话</td>
          <td>
            <input type="text" name="phone">
          </td>
        </tr>
        <tr>
          <td>用户邮箱</td>
          <td>
            <input type="text" name="email">
          </td>
        </tr>
        <tr>
          <td>所属部门</td>
          <td>
            <select name="deparatment_id">
              <option value="1">人事部</option>
              <option value="2">财务部</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <input type="button" value="注册" id="btn"/>
          </td>
        </tr>
      </table>
    </form>
    <h1 id="message"> 提示信息！ </h1>
  </center>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  /*发送ajax请求*/
  $("#btn").click(function () {
    $.ajax({
      type:"post",
      url:"/user/register",
      data: $("#register_form").serialize(),
      dataType: "JSON",
      success:function (result) {
        console.log("拿到的结果是："+result.message);
        // 将服务器发生回来的结果中的提示信息，放置到h1标签中
        $("#message").text(result.message);
      }

    })
  })


    // var json ={
    //   "id" : 17,
    //   "username" : null,
    //   "password" : "password",
    //   "age" : null,
    //   "phone" : "19923456789",
    //   "email" : null,
    //   "deparatment_id" : null,
    //   "message": "注册成功！",
    //   "dept":{id:1, name:"研发部"}
    // }
    //
    // console.log(json.password);
    // console.log(json.phone);
    // console.log(json.dept.name);
    // for (let i = 0; i < json.length; i++) {
    //
    //   console.log(json[i]);
    //
    // }
</script>
</body>
</html>